<template>
	<a-transfer
		v-model:target-keys  		= 'targetKeys'
		:render 					= 'item => item[nameStr]'
		:rowKey 					= 'item => item[idStr]'
	    @change 					= 'onChange'
		@search 					= 'onSearch'
		@selectChange 				= 'onSelectChange'
	    :showSearch 				= 'true'
		:showSelectAll 				= 'true'
	    :dataSource 				= 'ajax.data'
		:list-style 				= "{height: fn.setPx(height) , minHeight:'200px'}"
		:filter-option 				= '(inputValue, option) => option[nameStr].indexOf(inputValue) !== -1'
		:titles 					= " title ?['未' + title, '已' + title] : []"
	>
		<slot></slot>
	</a-transfer>
</template>

<script>
	import { ref, watch } from 'vue'
	import { Transfer } from 'ant-design-vue'
	app.use(Transfer)
	export default{
		props:{
			value 		: { type:Array, default: [] },
			data		: { type:Array, default: [] },
			api 		: String,
			name 		: String,
			idStr 		: { type: String, default: $config.idStr },
			nameStr 	: { type: String, default: $config.nameStr },
			height 		: { type: [String, Number], default: 200},
			title 		: { type: String, default: ''},
			param 		: [ Object, Number, Boolean],
			paging 		: [Number, Boolean],
			setName 	: Function,
			cache 		: Boolean
		},
		emits:{
			change:null,
			'update:value':null,
			init: null
		},
		setup(props, ctx){
			const { value, idStr, nameStr, data } = props
			const ajax = ref({ data })
			
			const targetKeys = ref(value.map(v => v.toString()))
			
			$fn.ajax({ ajax, ctx, ...props })
			
			watch(()=>props.value, value => targetKeys.value = value.map(v => v.toString()))
			
			watch( () => props.data, data => ajax.value.data = data )
			
			return {
				fn: $,
				ajax,
				targetKeys,
				onChange: value => {
					ctx.emit('update:value', value)
					targetKeys.value = value
				},
				onSearch: value => {
					// ctx.emit('update:value', value)
				},
				onSelectChange: value => {
					// value => ctx.emit('update:value', value)
					// targetKeys.value.push(value)
				}
			}
		}
	}
</script>